﻿/*
  Css Name : main.css
  Description : 
  Modification Information

      수정일        수정자          수정내용
    ----------     --------    ---------------------------
    20xx.xx.xx					최초 생성


    author   : 
    since    : 2013.07.05
*/
@charset "utf-8";*{margin:0;padding:0;border:0;outline:0}
html,body{height:100%;min-height:100%}
div#header{background:#fbfbfb}
div#header img{position:absolute;top:3px;left:10px}
div#header span{color:gray}
div#main_nav ul li{background:white}
div#footer{background:#fbfbfb}
div#header{z-index:1500}
div#main_nav{z-index:1300}
div#main_info{z-index:900}
.CodeMirror{z-index:900}
iframe#code_preview{z-index:900}
div#addinfo_list ul{z-index:1000}
div#sourcecode_tag,div#codepreview_tag,div#addinfo_tag{z-index:1000}
div.preview320_btn{z-index:1000}
ul#phonechange{z-index:1000}
div#addinfo_list{z-index:800}
div#tipbox{z-index:1100}
div#tipbox_cls{z-index:1200}
div#header{position:fixed;top:0;left:0;width:100%;height:30px;border-bottom:1px solid #dfdfdf}
div#header span{position:absolute;top:8px;right:100px}
.arti_header{position:relative!important}
div#main_nav{position:fixed;top:31px;right:0;width:320px;border:1px solid #dfdfdf;border-top:0}
div#main_nav ul{padding-left:0}
div#main_nav ul li{height:30px;list-style:none;border-top:1px dotted #dfdfdf}
div#main_nav ul li:first-child{border-top:0}
div#main_nav ul li:hover{cursor:pointer}
div#main_info{position:relative;margin:80px auto;margin-bottom:29px}
.clearSpace{height:1px;background:transparent}
div#main_info ul.test_browser{position:absolute;bottom:2px;left:0;width:100%;height:22px}
div#main_info ul li{margin:0 3px;width:20px;height:20px;list-style:none;float:left}
div#main_info ul li:first-child{margin-left:5px}
.contents{margin:10px 0 10px 10px;width:300px;height:250px;background:white;border:1px solid #bbb;float:left}
.contents{box-shadow:3px 3px 3px gray;border-radius:5px;behavior:url(../../PIE.htc)}
.contents:hover{cursor:pointer}.list{height:100px}
.con_html_markup:before{content:'HTML : Markup';position:absolute;top:-1px;left:-1px;width:140px;height:20px;border-radius:5px 0}
.con_html_markup:before{background:#262425;color:white;font-family:dotum;font-size:13px;text-align:center;line-height:20px}
.con_html_canvas:before{content:'HTML : Canvas';position:absolute;top:-1px;left:-1px;width:140px;height:20px;border-radius:5px 0}
.con_html_canvas:before{background:#262425;color:white;font-family:dotum;font-size:13px;text-align:center;line-height:20px}
.con_css_background:before{content:'CSS : Background';position:absolute;top:-1px;left:-1px;width:140px;height:20px;border-radius:5px 0}
.con_css_background:before{background:#89b652;color:white;font-family:dotum;font-size:13px;text-align:center;line-height:20px}
.con_css_border:before{content:'CSS : Border';position:absolute;top:-1px;left:-1px;width:140px;height:20px;border-radius:5px 0}
.con_css_border:before{background:#89b652;color:white;font-family:dotum;font-size:13px;text-align:center;line-height:20px}
.con_css_transition:before{content:'CSS : Transition';position:absolute;top:-1px;left:-1px;width:140px;height:20px;border-radius:5px 0}
.con_css_transition:before{background:#89b652;color:white;font-family:dotum;font-size:13px;text-align:center;line-height:20px}
.con_script_basic:before{content:'SCRIPT : Basic';position:absolute;top:-1px;left:-1px;width:140px;height:20px;border-radius:5px 0}
.con_script_basic:before{background:#c5322c;color:white;font-family:dotum;font-size:13px;text-align:center;line-height:20px}
.con_script_jquery:before{content:'SCRIPT : Jquery';position:absolute;top:-1px;left:-1px;width:140px;height:20px;border-radius:5px 0}
.con_script_jquery:before{background:#c5322c;color:white;font-family:dotum;font-size:13px;text-align:center;line-height:20px}
.con_script_jqueryui:before{content:'SCRIPT : Jquery UI';position:absolute;top:-1px;left:-1px;width:140px;height:20px;border-radius:5px 0}
.con_script_jqueryui:before{background:#c5322c;color:white;font-family:dotum;font-size:13px;text-align:center;line-height:20px}
.con_script_sencha:before{content:'SCRIPT : Sencha 2';position:absolute;top:-1px;left:-1px;width:140px;height:20px;border-radius:5px 0}
.con_script_sencha:before{background:#c5322c;color:white;font-family:dotum;font-size:13px;text-align:center;line-height:20px}
.con_app_web:before{content:'응용 : Web';position:absolute;top:-1px;left:-1px;width:140px;height:20px;border-radius:5px 0}
.con_app_web:before{background:#ccbd25;color:white;font-family:dotum;font-size:13px;text-align:center;line-height:20px}
.con_app_mobileweb:before{content:'응용 : Mobile Web';position:absolute;top:-1px;left:-1px;width:140px;height:20px;border-radius:5px 0}
.con_app_mobileweb:before{background:#ccbd25;color:white;font-family:dotum;font-size:13px;text-align:center;line-height:20px}
.con_etc_solution:before{content:'기타 : Solution';position:absolute;top:-1px;left:-1px;width:140px;height:20px;border-radius:5px 0}
.con_etc_solution:before{background:#63a5db;color:white;font-family:dotum;font-size:13px;text-align:center;line-height:20px}
.con_etc_qa:before{content:'기타 : Q & A';position:absolute;top:-1px;left:-1px;width:140px;height:20px;border-radius:5px 0}
.con_etc_qa:before{background:#63a5db;color:white;font-family:dotum;font-size:13px;text-align:center;line-height:20px}
div#main_nav ul li{font-family:dotum;text-indent:10px;line-height:30px}div#main_nav ul li:first-child{font-weight:bold}
div#main_nav ul li:hover{background:#fbfbfb}div#main_info a div span{position:relative;top:30px;left:5px}
div#main_info a div span{font-family:dotum;font-size:11px;color:black}
div#main_info a div img{position:relative;top:45px;left:7px;width:94%;height:140px;text-align:center}
div#main_info a:link{text-decoration:none}div#main_info a:visited{text-decoration:none}
div#main_info a div:link{text-decoration:none}div#main_info a div:visited{text-decoration:none}
div#main_info a div span:link{text-decoration:none}div#main_info a div span:visited{text-decoration:none}
div#main_info a div img:link{text-decoration:none}div#main_info a div img:visited{text-decoration:none}div#header span{font-family:dotum;font-size:13px;font-weight:bold}div#main_info{font-family:dotum;font-size:13px}
div#main_info ul li.br_ch{background:url(../../images/korea2/br_ch.png) center no-repeat}
div#main_info ul li.br_ff{background:url(../../images/korea2/br_ff.png) center no-repeat}
div#main_info ul li.br_op{background:url(../../images/korea2/br_op.png) center no-repeat}
div#main_info ul li.br_sf{background:url(../../images/korea2/br_sf.png) center no-repeat}
div#main_info ul li.br_sp{background:url(../../images/korea2/br_sp.png) center no-repeat}
div#main_info ul li.br_ie{background:url(../../images/korea2/br_ie.png) center no-repeat;margin-right:12px}
div#main_info ul li.br_ie span{position:relative;top:4px;left:22px;font-family:dotum;font-size:13px;font-weight:bold;color:gray}div#main_btn{position:absolute;top:4px;right:10px;width:80px;height:20px;border:1px solid;color:gray;float:left}
div#main_btn{font-family:dotum;font-size:12px;font-weight:bold;text-align:center;line-height:20px}
div#main_btn{text-shadow:2px 2px 2px white}div#main_btn:hover{cursor:pointer}
div#main_btn:active{background:#dfdfdf}
.CodeMirror{position:relative;width:100%;height:320px;padding-top:30px;word-break:break-word}
.CodeMirror{font-family:dotum;font-size:14px}iframe#code_preview{position:relative;width:100%;height:99.7%;border-top:1px dotted}
iframe.initheight{height:480px!important}div#sourcecode_tag{position:absolute;top:31px;left:-1px;width:80px;height:20px}
div#sourcecode_tag{background:black;color:white;font-family:dotum;font-size:13px;text-align:center;line-height:20px}
div#codepreview_tag{position:absolute;top:362px;left:-1px;width:80px;height:20px}
div#codepreview_tag{background:#63a5db;color:white;font-family:dotum;font-size:13px;text-align:center;line-height:20px}
div#sourcecode_tag{cursor:pointer}div#codepreview_tag:hover{cursor:pointer}
div#addinfo_tag{position:absolute;top:362px;left:100px;width:110px;height:20px}
div#addinfo_tag{background:#89b652;color:white;font-family:dotum;font-size:13px;text-align:center;line-height:20px}
div#addinfo_tag:hover{cursor:pointer}div#addinfo_list{display:none}
div#addinfo_list ul{position:absolute;top:382px;left:100px;width:550px;background:white;border:1px dotted;border-top:0}
div#addinfo_list ul li{height:30px;list-style:none}
div#addinfo_list ul li{font-family:dotum;font-size:14px;border-top:1px dotted;text-indent:10px;line-height:2.2em}div#addinfo_list ul li span{font-weight:bold}
div#addinfo_list ul li:first-child{border-top:0}
div#addinfo_list ul li:hover{cursor:pointer}
div#tipbox{position:absolute;top:61px;right:20px;width:850px;height:295px;float:right;background:white}
div#tipbox{border:2px dotted #aaa;overflow:auto;border-radius:5px}
div#tipbox{font-family:dotum;font-size:12px}
div#tipbox_cls{position:absolute;top:61px;right:20px;width:30px;height:30px;background:#ed1c24}
div#tipbox_cls{cursor:pointer;font-family:arial;font-size:27px;color:white;text-align:center}
div#contain_index{position:absolute;top:50%;left:50%;margin:-150px -480px;width:960px;height:315px}
div#contain_index ul{padding-left:0}div#contain_index ul li{margin:0 30px;width:258px;height:313px;float:left;list-style:none}
div#contain_index ul li p{font-family:arial;font-size:30px;font-weight:bold;color:#4e4e4e;text-align:center;padding:5px}
div#contain_index span{position:relative;top:20px;left:50px;font-family:dotum;font-size:15px}
div#header div#center_nav{position:relative;margin:auto;width:154px;height:30px}
div#center_nav ul{padding-left:0}
div#center_nav ul li{list-style:none;float:left;width:50px;height:31px;border-right:1px solid #dfdfdf}
div#center_nav ul li:hover{cursor:pointer}
.first_li{border-left:1px solid #dfdfdf}
div#center_nav ul li img{position:relative;top:2px;left:12px}
.centernav_act{background:white}.toolcon{width:250px;height:200px}
.tool_toolkit:before{content:'온라인 작업도구';position:absolute;top:-1px;left:-1px;width:120px;height:20px;border-radius:5px 0}
.tool_toolkit:before{background:#6b6b6b;color:white;font-family:dotum;font-size:13px;text-align:center;line-height:20px}
.tool_toolkit_generator:before{content:'온라인 생성기';position:absolute;top:-1px;left:-1px;width:120px;height:20px;border-radius:5px 0}
.tool_toolkit_generator:before{background:#87b86d;color:white;font-family:dotum;font-size:13px;text-align:center;line-height:20px}
.tool_toolkit_conversion:before{content:'온라인 변환기';position:absolute;top:-1px;left:-1px;width:120px;height:20px;border-radius:5px 0}
.tool_toolkit_conversion:before{background:#6d99b8;color:white;font-family:dotum;font-size:13px;text-align:center;line-height:20px}
.tool_jslib:before{content:'JS 라이브러리';position:absolute;top:-1px;left:-1px;width:120px;height:20px;border-radius:5px 0}
.tool_jslib:before{background:#d65751;color:white;font-family:dotum;font-size:13px;text-align:center;line-height:20px}div#main_info a div img.tool_img{height:115px;border:1px solid;color:black}
div#header span.tool_span{right:100px}.arrow_up{width:302px;height:170px;background:#385d8a;border-radius:65px;box-shadow:none}.arrow_up:before{content:'';position:absolute;bottom:35px;left:50px;width:0;border:100px solid transparent;border-bottom-color:white}.arrow_up_list{width:250px;height:130px;background:#385d8a;border-radius:50px;box-shadow:none}.arrow_up_list:before{content:'';position:absolute;bottom:30px;left:50px;width:0;border:75px solid transparent;border-bottom-color:white}